<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Formatting Items - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../../easyui-1.11.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../../easyui-1.11.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>

<body>
	<h2>Formatting Items</h2>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel" style="padding:10px">
		<div class="easyui-timeline" data-options="data:data,formatter:myFormatter"></div>
	</div>
	<script>
		var data = [
			{ content: 'Create the application', date: 'May 15,2024' },
			{ content: 'Solve some questions', date: 'Jun 22,2024' },
			{ content: 'Update API document', date: 'Jul 23,2024' },
			{ content: 'Change the styles', date: 'Aug 14,2024' },
		];
		function myFormatter(row){
			return '<div>'+row.content+'</div>'+'<div style="font-size:12px;opacity:0.5">'+row.date+'</div>';
		}
	</script>
</body>

</html>